<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    #container {
      width: 800px;
      height: 400px;
    }
  </style>
</head>
<body>  
  <!-- 2.准备具备宽高的DOM容器 -->
  <div id="container"></div>
  <!-- 1.引入echarts js 文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
  <script>
    // 3. 初始化echarts 的实例
    const myEcharts = echarts.init(document.querySelector("#container"));
    // 4.定义图表配置项potion
    const option = {
        // color: ["#282828","#da5583","#ce9178"],
        // 标题
        // x轴
        xAxis: {
          // 需要统计的数据的名称  或则说类型 
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期日",
          ],
        },
        // y轴
        yAxis: {
          // 轴线
          axisLine: {
            show: true,
          },
          // 刻度线
          axisTick: {
            show: true,
          },
        },
        // 提示框  移入提示里面的值 数量是多少
        tooltip: {},
        // 系列：指定图表类型和图表渲染的数据  

        legend: {
          data: ["柱形图", "折线图", "饼图"],
        },
        series: [
        {
          name: "柱形图",
          type: "bar", // 图表的类型
          data: [15, 25, 36, 30, 24, 15, 25, 36, 30, 24, 44, 23],
        },
        {
          name: "折线图",
          type: "line", // 图表的类型
          data: [15, 25, 36, 30, 24, 15, 25, 36, 30, 24, 44, 23],
        },
        {
          name: "饼图",
          type: "pie", // 图表的类型
          data: [
              { name: "xx", value: 11 },
              { name: "yy", value: 22 },
              { name: "zz", value: 33 },
            ],
          // 半径
          radius: [0, 30],
          // 圆心点坐标
          center: [650, 40],
        },
      ]
      };
    // 渲染图表
    myEcharts.setOption(option);
  </script>
</body>
</html>